<template>
	<view>
		<view class="">
			<swiper style="height: 140px;" indicator-active-color="rgba(200,200,200,0.5)" :autoplay="true"
			 :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item">
						<image class="banner" :src="item.img" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="lawer-top">
			<image src="../../static/image/banner.png" ></image>
			<view class="intr">
				<view class="intr-top">
					<text style="font-size: 28rpx;color: #000000;font-weight: 500;padding: 10rpx;">李瑞敏律师</text>
					<text style="margin:0 0 0 20rpx">执业4年</text>
				</view>
				<view class="intr-middle">
					<image src="../../static/image/map.png" mode=""></image>
					<text class="m10">广东</text>
					<text class="m10">广州</text>
					<text style="margin: 0 10rpx;">|</text>
					<text>国信新阳律师事务所</text>
				</view>
				<view class="intr-bottom">
					<image src="../../static/image/icon/合同纠纷.png" mode=""></image>
					<text class="m10">执业编号：144123123123125</text>
				</view>
			</view>
		</view>
		<view class="zan-c">
			<view class="zan">
				<image src="../../static/image/banner.png" mode=""></image>
				<view class="">
					<swiper :autoplay="true" :interval="2000" :duration="1000">
						<swiper-item>
							<view class="swiper-item">12121</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="intr-box">
			<view class="intr-title">
				<image src="../../static/image/intr.png" mode=""></image>
				<text>律师简介</text>
			</view>
			<view class="intr-content" :style="'-webkit-line-clamp: '+clamp+''">
				撒旦法士大夫为服务服务费瓦房3发发而无法为，撒旦飞时达发放水电费 。沙发上发文范德萨。阿斯顿发送到发送到的范文芳法法地方。 fsad/范德萨 
				撒旦法士大夫为服务服务费瓦房3发发而无法为，撒旦飞时达发放水电费 。沙发上发文范德萨。阿斯顿发送到发送到的范文芳法法地方。 fsad/范德萨 
			</view>
			<view class="jiantou" @tap="intrMore">
				<image src="../../static/image/xiangxia.png" :style="'transform: rotate('+deg+'deg)'" mode=""></image>
			</view>
		</view>
		<view class="line"></view>
		<view class="intr-box" style="padding-right: 0;">
			<view class="intr-title" style="margin: 0 0 15rpx 0;">
				<image src="../../static/image/anli.png" mode=""></image>
				<text>诉讼案例</text>
			</view>
			<view class="anli-box" v-for="item in 6" :key="item" @tap="jumpSortList">
				<text>行政诉讼</text>
				<text class="num">共202篇案例</text>
				<image src="../../static/image/xiangxia.png" mode=""></image>
			</view>
			
		</view>
		<view style="height: 100rpx;"></view>
		<view class="page-bottom">
			<button size="default" open-type="contact">
				<image src="../../static/image/home.png" class="kefu" mode=""></image>
				<text>联系客服</text>
			</button>
			<view class="bottom-line">
				
			</view>
			<view class="bottom-middle" @tap="$refs.popup.open()">
				<image src="../../static/image/banner2.png" class="phone" mode=""></image>
				<image src="../../static/choose-Cade/choose-Cades.png" class="xiangshang" mode=""></image>
			</view>
			<view class="price" @tap="pay">
				38元咨询律师
			</view>
		</view>
		
		<!-- 点击底部弹窗 -->
		<uni-popup ref="popup">
			<view class="pop-c">
				<view class="pop-title">
					服务内容
				</view>
				<view class="pop-line">
					<image src="../../static/image/consult/loaing.png" mode=""></image>
					<view class="">
						享1小时，一对一电话咨询+图文语音
					</view>
				</view>
				<view class="pop-line">
					<image src="../../static/image/consult/pay.png" mode=""></image>
					<view class="">
						律师未响应，服务差，可立即投诉退款
					</view>
				</view>
				<view class="pop-line">
					<image src="../../static/image/consult/write.png" mode=""></image>
					<view class="">
						在线客服，实时跟踪反馈
					</view>
				</view>
				<image src="../../static/image/banner.png" class="pop-middle" mode=""></image>
				<view class="pop-btn" @tap="pay">
					38元咨询律师
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue"
export default {
	data() {
		return {
			id:-1,
			clamp:3,
			deg:180,
			swiperList: [{
				img: "../../static/image/banner.png"
			}]
		};
	},
	methods:{
		intrMore(){
			this.deg===180?(this.deg=0,this.clamp=20):(this.deg=180,this.clamp=3)
		},
		pay(){
			this.$refs.popup.close()
		},
		jumpSortList(item){
			uni.navigateTo({
				url:"/pages/sortList/sortList"
			})
		}
	},
	created(options) {
		this.id=options.id
	},
	components:{
		uniPopup
	}
}
</script>

<style lang="scss">
.banner{
	width: 100%;
}
.lawer-top{
	font-size: 23rpx;
	color: #888888;
	letter-spacing: 1rpx;
	width: 90%;
	margin: 10rpx auto;
	display: flex;
	>image{
		width: 110rpx;
		height: 110rpx;
		position: relative;
		top: -22rpx;
		border-radius: 50%;
		border: 6rpx solid #fff;
	}
}
.intr{
	margin: 0 0 0 30rpx;
}
.intr-top{
	letter-spacing: 2rpx;
}
.intr-middle{
	display: flex;
	align-items: center;
	margin: 20rpx 0;
	>image{
		width: 30rpx;
		height: 30rpx;
	}
}
.intr-bottom{
	display: flex;
	align-items: center;
	>image{
		width: 30rpx;
		height: 30rpx;
	}
}
.m10{
	margin: 0 0 0 10rpx;
}
.zan-c{
	background-color: #F5F5F5;
	height: 150rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.zan{
	display: flex;
	padding: 10rpx;
	background-color: #fff;
	border-radius: 2px;
	box-shadow: 0 0 2rpx 2rpx #eee;
	box-sizing: border-box;
	width: 90%;
	height: 85%;
	>image{
		width: 100rpx;
		height: 100rpx;
	}
}
.intr-box{
	padding: 20rpx;
}
.intr-title{
	display: flex;
	align-items: center;
	font-size: 30rpx;
	font-weight: 500;
	>image{
		width: 30rpx;
		height: 30rpx;
	}
	text{
		margin: 0 0 0 15rpx;
	}
}
.intr-content{
	margin: 10rpx 0 0 0;
	text-indent: 52rpx;
	letter-spacing: 1rpx;
	font-size: 26rpx;
	color: #999;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jiantou{
	text-align: center;
	>image{
		width: 30rpx;
		height: 30rpx;
	}
}
.line{
	height: 12rpx;
	background-color:#F5F5F5 ;
}
.anli-box{
	display: flex;
	align-items: center;
	border-top: 1rpx solid #eee;
	font-size: 28rpx;
	padding: 20rpx 20rpx 20rpx 10rpx;
	>image{
		width:30rpx;
		height: 30rpx;
		transform: rotate(90deg);
		margin: 0 0 0 auto;
	}
	.num{
		margin: 0 0 0 20rpx;
		color: #bbb;
		font-size: 25rpx;
	}
}
</style>
